<script setup lang="ts">
import {onMounted, ref} from "vue";
import {getRixibaoListApi, intoRixibaoApi, outRixibaoApi,getRixibaoDetailApi} from "@/api/rixibaoApi.ts";
import rixibaoIntoImg from '../../assets/images/rixibaoInto.png';
import rixibaoOutImg from '../../assets/images/rixibaoOut.png';
import {getUserInfoApi} from "@/api/userApi.ts";
import {useI18n} from "vue-i18n";
import {showToast} from "vant";
import {useStore} from "vuex";
const {t} = useI18n()
const store = useStore();

const filter = ref({
  page: 1
});
const loading = ref(false);
const finished = ref(false);

const list = ref([]);
const fetchRixibaoRecordData = () => {
  loading.value = true;

  getRixibaoListApi(filter.value).then(res => {
    if (res.data.length > 0) {
      list.value.push(...res.data);
      filter.value.page += 1;
    } else {
      finished.value = true;
    }
    loading.value = false;
  })
}

const user = ref([]);
const fetchUserData = () => {
  getUserInfoApi().then(res => {
    user.value = res.data;
  })
}

const rixibao = ref([]);
const fetchRixibaoData = () => {
  getRixibaoDetailApi().then(res => {
    rixibao.value = res.data;
  })
}

const showPicker = ref(false);
const showTitle = ref(t('placeholder.intoMoneyEmpty'));
const form = ref({
  type:1,
  money:''
});
const handleRixibao = (type:any) => {
  form.value.money = '';
  form.value.type = type;
  if(type == 1){
    showTitle.value = t('placeholder.intoMoneyEmpty')
  } else {
    showTitle.value =t('placeholder.outMoneyEmpty')
  }
  showPicker.value = true;
}

const onConfirm = () => {
  showPicker.value = true;
  if (form.value.money == '') {
    if (form.value.type == 1) {
      showToast(t('placeholder.intoMoneyEmpty'));
    } else {
      showToast(t('placeholder.outMoneyEmpty'));
    }
  }

  store.state.loadingState = true;
  if (form.value.type == 1) {
    intoRixibaoApi({
      money: form.value.money
    }).then(res => {
      showToast(res.msg);
      store.state.loadingState = false;
      if (res.code == 0) {
        history.go(0)
      }
    });
  } else {
    outRixibaoApi({
      money: form.value.money
    }).then(res => {
      showToast(res.msg);
      store.state.loadingState = false;
      if (res.code == 0) {
        history.go(0)
      }
    });
  }
}

const onCancel = () => {
  showPicker.value = false;
}

onMounted(() => {
  fetchUserData();
  fetchRixibaoData();
})
</script>

<template>
  <div class="price">
    <div class="price-item">
      <span>{{ $t('rixibao.totalMoney') }}</span>
      <span class="money">{{ user.rixibao_money }}</span>
    </div>
    <div class="price-item">
      <span>{{ $t('rixibao.dayIncome') }}</span>
      <span class="money">{{ (user.rixibao_money * (rixibao.rixibao_rate / 100)).toFixed(2) }}</span>
    </div>
  </div>
  <div class="operate">
    <div class="operate-item" @click="handleRixibao(1)">
      <div class="operate-item-left">
        <div class="operate-item-img">
          <van-image width="22px" height="22px" :src="rixibaoIntoImg"/>
        </div>
        <span>{{ $t('rixibao.into') }}</span>
      </div>
      <span>{{ $t('rixibao.rate') }}{{ rixibao.rixibao_rate }}%</span>
    </div>
    <div class="operate-item" @click="handleRixibao(2)">
      <div class="operate-item-left">
        <div class="operate-item-img">
          <van-image width="22px" height="22px" :src="rixibaoOutImg"/>
        </div>
        <span>{{ $t('rixibao.out') }}</span>
      </div>
      <span>{{ $t('rixibao.income') }}{{ rixibao.income }}</span>
    </div>
  </div>

  <div class="record">
    <div class="record-title">
      <span>{{ $t('rixibao.record') }}</span>
    </div>

    <van-list
        v-model:loading="loading"
        :finished="finished"
        :finished-text="$t('rixibao.empty')"
        @load="fetchRixibaoRecordData"
    >
      <div v-for="item in list" class="record-item">
        <div>
          <span>{{ $t('rixibao.time') }}</span>
          <span>{{ item.created_at }}</span>
        </div>
        <div>
          <span>{{ $t('rixibao.type') }}</span>
          <span v-if="item.type == 1">{{ $t('rixibao.type1') }}</span>
          <span v-if="item.type == 2">{{ $t('rixibao.type2') }}</span>
          <span v-if="item.type == 3">{{ $t('rixibao.type3') }}</span>
        </div>
        <div>
          <span>{{ $t('rixibao.money') }}</span>
          <span>{{ item.money }}</span>
        </div>
      </div>
    </van-list>
  </div>

  <van-dialog
      v-model:show="showPicker"
      :title="showTitle"
      @confirm="onConfirm"
      @cancel="onCancel"
      show-cancel-button>
    <div style="border: 1px #eee solid;height: 40px;padding: 0 10px;width: 80%;margin: 10px auto">
      <input type="text" :placeholder="showTitle" v-model="form.money" style="height: 100%;"/>
    </div>
  </van-dialog>
</template>

<style scoped lang="less">
@import "../../less/rixibao.less";
</style>